<!doctype html>
<html lang="en">
<head>
    <title>Datasource - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.0.8.2.css" rel="stylesheet" type="text/css" />
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijdatasource.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            // put all your jQuery goodness in here.

            var superPanelRefreshed = false;
            var proxy = new wijhttpproxy({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: 'ab'
                },
                key: 'geonames'
            });
            var myReader = new wijarrayreader([{
                name: 'label',
                mapping: function (item) {
                    return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
                }
            }, {
                name: 'value',
                mapping: 'name'
            }, {
                name: 'selected',
                defaultValue: false
            }]);
            var list = $("#list");
            var input = $('#testinput');
            list.wijlist({
                selected: function (event, ui) {
                    var item = ui.item;
                    input.val(item.value);
                    list.wijlist('deactivate');
                }
            });
            datasource = new wijdatasource({
                reader: myReader,
                proxy: proxy,
                loading: function () {
                    input.addClass('ui-wijcombobox-loading');
                },
                loaded: function (data) {
                    list.wijlist('setItems', data.items);
                    list.wijlist('renderList');
                    list.wijlist('refreshSuperPanel');
                    input.removeClass('ui-wijcombobox-loading');
                }
            });

            datasource.load();
            input.bind("keydown.wijcombobox", function (event) {
                var keyCode = $.ui.keyCode;
                switch (event.keyCode) {
                    case keyCode.UP:
                        list.wijlist('previous', event);
                        // prevent moving cursor to beginning of text field in some browsers
                        event.preventDefault();
                        break;
                    case keyCode.DOWN:
                        if (!list.is(':visible')) {
                            list.show();
                            return;
                        }
                        list.wijlist('next', event);
                        // prevent moving cursor to end of text field in some browsers
                        event.preventDefault();
                        break;
                    case keyCode.ENTER:
                        event.preventDefault();
                        list.wijlist('select', event);
                        break;
                    case keyCode.PAGE_UP:
                        list.wijlist('previousPage');
                        break;
                    case keyCode.PAGE_DOWN:
                        list.wijlist('nextPage');
                        break;
                    default:
                        break;
                }
            });
        });

        function loadRemoteData() {
            datasource.proxy.options.data.name_startsWith = $('#testinput').val();
            datasource.load();
        }
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div class="ui-widget">
                <input style="width: 400px" id="testinput" type="textbox" class="ui-widget-content ui-corner-all" /><input type="button" onclick="loadRemoteData()" id="loadremote" value="Load Remote Data" />
                <div id="list" style="height: 300px; width: 400px;">
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            </p>
        </div>
    </div>
</body>
</html>
